<template>

  <!-- 图表展示区 -->

  <div class="charts-container" v-show="advanceCharts">
    <!-- 新增的待审核人数展示区块 -->
    <div class="audit-count-card">
      <div class="count-header">
        <el-icon class="notification-icon">
          <Bell />
        </el-icon>
        <span class="count-title">筛选后的人员数量</span>
      </div>
      <div class="count-content">
        <span class="highlight-number">{{ total }}</span>
        <span class="unit">人</span>
      </div>
    </div>
    <!-- 饼图容器 -->
    <div ref="barChart1" class="chart-item" style="width: 500px; height: 280px;"></div>
    <!-- 柱状图 展示各年级人数对比 -->
    <div ref="barChart2" class="chart-item" style="width: 500px; height: 280px;"></div>
  </div>

  <!-- 图表按钮 -->
  <div class="advanced-btn-container">
    <button @click="toggleAdvancedCharts" class="secondary-btn">
      {{ advanceCharts ? '收起图表' : '展开图表' }}
    </button>
  </div>

  <!-- 筛选功能区 -->
  <div class="filter-container">
    <!-- 基础筛选 -->
    <div class="basic-filters">
      <div class="filter-grid">

        <div class="filter-item">
          <label>姓名：</label>
          <input type="text" v-model="qName" class="input-field">
        </div>
        <div class="filter-item">
          <label>学院：</label>
          <input type="text" v-model="qCollege" class="input-field">
        </div>
        <div class="filter-item">
          <label>学号：</label>
          <input type="text" v-model="qStudentId" class="input-field">
        </div>
        <div class="filter-item">
          <label for="qGender">性别：</label>
          <select id="qGender" v-model="qGender" class="input-field">
            <option value="">请选择</option>
            <option value="1">男</option>
            <option value="2">女</option>
          </select>
        </div>
        <div class="filter-item">
          <label>民族：</label>
          <el-select v-model="qNation" filterable placeholder="请选择民族" :filter-method="filterNations"
            @change="handleNationChange">
            <el-option v-for="nation in filteredNations" :key="nation.code" :label="nation.name" :value="nation.code" />
          </el-select>
        </div>
      </div>
    </div>

    <!-- 高级筛选 -->
    <div class="advanced-filters" v-show="showAdvancedFilters">
      <div class="filter-section">
        <h4 class="section-title">体测数据筛选</h4>

        <div class="filter-grid-detail">
          <!-- 身高范围 -->
          <div class="range-filter-item">
            <label>身高范围(cm)：</label>
            <div class="range-inputs">
              <input type="number" v-model="heightMin" placeholder="最小值" class="range-input">
              <span class="range-separator">-</span>
              <input type="number" v-model="heightMax" placeholder="最大值" class="range-input">
            </div>
          </div>

          <!-- 体重范围 -->
          <div class="range-filter-item">
            <label>体重范围(kg)：</label>
            <div class="range-inputs">
              <input type="number" v-model="weightMin" placeholder="最小值" class="range-input">
              <span class="range-separator">-</span>
              <input type="number" v-model="weightMax" placeholder="最大值" class="range-input">
            </div>
          </div>

          <!-- BMI范围 -->
          <div class="range-filter-item">
            <label>BMI范围：</label>
            <div class="range-inputs">
              <input type="number" v-model="bmiMin" placeholder="最小值" class="range-input" step="0.1">
              <span class="range-separator">-</span>
              <input type="number" v-model="bmiMax" placeholder="最大值" class="range-input" step="0.1">
            </div>
          </div>

          <!-- 测试年份 -->
          <div class="filter-item">
            <label>测试年份：</label>
            <select v-model="testYear" class="input-field">
              <option value="">全部年份</option>
              <option value="2022">2022年</option>
              <option value="2023">2023年</option>
              <option value="2024">2024年</option>
            </select>
          </div>

          <!-- 成绩等级 -->
          <div class="filter-item">
            <label>测试等级：</label>
            <select v-model="testGrade" class="input-field">
              <option value="">全部等级</option>
              <option value="优秀">优秀</option>
              <option value="良好">良好</option>
              <option value="及格">及格</option>
              <option value="不及格">不及格</option>
            </select>
          </div>

          <!-- 总分范围 -->
          <div class="range-filter-item">
            <label>总分范围：</label>
            <div class="range-inputs">
              <input type="number" v-model="totalScoreMin" placeholder="最小分" class="range-input">
              <span class="range-separator">-</span>
              <input type="number" v-model="totalScoreMax" placeholder="最大分" class="range-input">
            </div>
          </div>

          <!-- 50米跑成绩 -->
          <div class="range-filter-item">
            <label>50米跑(分)：</label>
            <div class="range-inputs">
              <input type="number" v-model="fiftyMeterMin" placeholder="最小值" class="range-input" step="0.1">
              <span class="range-separator">-</span>
              <input type="number" v-model="fiftyMeterMax" placeholder="最大值" class="range-input" step="0.1">
            </div>
          </div>

          <!-- 立定跳远成绩 -->
          <div class="range-filter-item">
            <label>耐力跑(800/1000米)：</label>
            <div class="range-inputs">
              <input type="number" v-model="enduranceRunScoreMin" placeholder="最小值" class="range-input">
              <span class="range-separator">-</span>
              <input type="number" v-model="enduranceRunScoreMax" placeholder="最大值" class="range-input">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选操作按钮 -->
    <div class="filter-actions">
      <div class="action-buttons">
        <el-button type="primary" :loading='isSearchLoding' @click="conditionPageQuery(currentPage, pageSize)">
          <el-icon>
            <Search />
          </el-icon>搜索
        </el-button>
        <el-button @click="resetFilters">
          <el-icon>
            <Refresh />
          </el-icon>重置
        </el-button>
        <el-button type="success" @click="toggleAdvancedFilters" class="toggle-btn">
          <el-icon>
            <component :is="showAdvancedFilters ? 'ArrowUp' : 'ArrowDown'" />
          </el-icon>
          {{ showAdvancedFilters ? '高级筛选' : '高级筛选' }}
        </el-button>
      </div>
    </div>
  </div>

  <!-- 选择表格需要展示的列 -->
  <div class="columnSelector">
    <div class="selectorTitle">当前呈现的列：</div>
    <el-select v-model="selectedColumns" multiple placeholder="请选择要显示的列">
      <el-option v-for="column in columnOptions" :key="column.value" :label="column.label" :value="column.value" />
    </el-select>
  </div>

  <!-- 表格展示区 -->
  <div class="tableShow">
    <el-table :data="tableData" row-key="id" style="width: 100%" max-height="580"
      @selection-change="handleSelectionChange" :header-cell-style="{ background: '#eef1f6', color: '#2c2c3b' }"
      @filter-change="handleFilterChange">
      <el-table-column type="selection" min-width="55"></el-table-column>
      <el-table-column fixed label="序号" min-width="60" align="center"> <!-- 固定表头 -->
        <template #default="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column fixed prop="studentId" label="学号" min-width="180" v-if="selectedColumns.includes('studentId')" />
      <!-- 固定表头 -->
      <el-table-column prop="name" label="姓名" min-width="80" v-if="selectedColumns.includes('name')" />
      <el-table-column label="性别" width="80" prop="gender" column-key="gender" v-if="selectedColumns.includes('gender')"
        :filters="[{ text: '男', value: 1 }, { text: '女', value: 2 }]" :filter-method="filterHandler"
        :formatter="formatGender">
      </el-table-column>
      <el-table-column prop="birthDate" label="出生日期" sortable min-width="140"
        v-if="selectedColumns.includes('birthDate')" />
      <el-table-column prop="college" label="学院" min-width="240" v-if="selectedColumns.includes('college')" />
      <el-table-column prop="className" label="班级" min-width="200" v-if="selectedColumns.includes('className')" />
      <el-table-column prop="height" label="身高(cm)" min-width="100" v-if="selectedColumns.includes('height')" />
      <el-table-column prop="weight" label="体重(kg)" min-width="100" v-if="selectedColumns.includes('weight')" />
      <el-table-column prop="bmi" label="BMI" min-width="80" v-if="selectedColumns.includes('bmi')" />
      <el-table-column prop="totalScore" label="总分" min-width="80" v-if="selectedColumns.includes('totalScore')" />
      <el-table-column prop="testGrade" label="等级" min-width="80" v-if="selectedColumns.includes('testGrade')" />
      <el-table-column prop="testYear" label="测试年份" min-width="100" v-if="selectedColumns.includes('testYear')" />
      <el-table-column prop="politicalAffiliation" label="政治面貌" min-width="100"
        v-if="selectedColumns.includes('politicalAffiliation')" />
      <el-table-column prop="nationality" label="民族" min-width="100" v-if="selectedColumns.includes('nationality')" />
      <el-table-column prop="contactNumber" label="电话" min-width="140"
        v-if="selectedColumns.includes('contactNumber')" />
      <el-table-column prop="idCard" label="身份证号码" min-width="220" v-if="selectedColumns.includes('idCard')" />
      <el-table-column prop="homeAddress" label="家庭住址" min-width="350" v-if="selectedColumns.includes('homeAddress')" />
      <el-table-column label="操作" align="center" fixed="right" min-width="130">
        <template #default="scope">
          <router-link :to="{ path: '/admin/school/memberDetilInfo', query: { studentId: scope.row.studentId } }"
            class="detail-btn">查看详细信息</router-link>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 底部分页导航栏 -->
  <div class="pageNav">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :hide-on-single-page="true"
      background :page-sizes="[5, 10, 20, 50]" :size="size" layout="total, prev, pager, next, sizes" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange">
    </el-pagination>
  </div>

</template>

<script setup lang="ts">
import { onMounted, ref, vShow, onBeforeUnmount } from 'vue';
import type { ComponentSize } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';
import * as echarts from 'echarts';
import { getLeftBottomMainChartData } from '@/api/data-screen/LeftChart';
import { getPageAllSchool } from '@/api/allSchool/allSchool';


let tableData = ref([])
const isSearchLoding = ref(true)

// 分页相关数据
const size = ref<ComponentSize>('default')
const currentPage = ref(1)
const pageSize = ref(5)
let total = ref(0)

// 定义基础查询参数
let qCollege = ref("")
let qGender = ref("")
let qName = ref("")
let qStudentId = ref("")
let qNation = ref("")

// 定义高级筛选参数
const showAdvancedFilters = ref(false)
const heightMin = ref("")
const heightMax = ref("")
const weightMin = ref("")
const weightMax = ref("")
const bmiMin = ref("")
const bmiMax = ref("")
const testYear = ref("")
const testGrade = ref("")
const totalScoreMin = ref("")
const totalScoreMax = ref("")
const fiftyMeterMin = ref("")
const fiftyMeterMax = ref("")
const enduranceRunScoreMin = ref("")
const enduranceRunScoreMax = ref("")

//图表展示
const advanceCharts = ref(true);

const router = useRouter()
const route = useRoute()






// 监听 Enter 按键
const handleKeyDown = (e: KeyboardEvent) => {
  if (e.key === 'Enter' || e.keyCode === 13) {
    e.preventDefault(); // 阻止默认行为（可选）
    conditionPageQuery(currentPage.value, pageSize.value);
  }
};

// 民族数据（示例数据，实际可从API获取）
const nationList = ref([
  { code: "1", name: "汉族" },
  { code: "2", name: "蒙古族" },
  { code: "3", name: "回族" },
  { code: "4", name: "藏族" },
  { code: "5", name: "维吾尔族" },
  { code: "6", name: "苗族" },
  { code: "7", name: "彝族" },
  { code: "8", name: "壮族" },
  { code: "9", name: "布依族" },
  { code: "10", name: "朝鲜族" },
  { code: "11", name: "满族" },
  { code: "12", name: "侗族" },
  { code: "13", name: "瑶族" },
  { code: "14", name: "白族" },
  { code: "15", name: "土家族" },
  { code: "16", name: "哈萨克族" },
  { code: "17", name: "哈尼族" },
  { code: "18", name: "黎族" },
  { code: "19", name: "傣族" },
  { code: "20", name: "畲族" },
  { code: "21", name: "傈僳族" },
  { code: "22", name: "仡佬族" },
  { code: "23", name: "东乡族" },
  { code: "24", name: "高山族" },
  { code: "25", name: "拉祜族" },
  { code: "26", name: "水族" },
  { code: "27", name: "佤族" },
  { code: "28", name: "纳西族" },
  { code: "29", name: "羌族" },
  { code: "30", name: "土族" },
  { code: "31", name: "仫佬族" },
  { code: "32", name: "锡伯族" },
  { code: "33", name: "柯尔克孜族" },
  { code: "34", name: "达斡尔族" },
  { code: "35", name: "景颇族" },
  { code: "36", name: "毛南族" },
  { code: "37", name: "撒拉族" },
  { code: "38", name: "塔吉克族" },
  { code: "39", name: "阿昌族" },
  { code: "40", name: "普米族" },
  { code: "41", name: "鄂温克族" },
  { code: "42", name: "怒族" },
  { code: "43", name: "京族" },
  { code: "44", name: "基诺族" },
  { code: "45", name: "德昂族" },
  { code: "46", name: "保安族" },
  { code: "47", name: "俄罗斯族" },
  { code: "48", name: "裕固族" },
  { code: "49", name: "乌兹别克族" },
  { code: "50", name: "门巴族" },
  { code: "51", name: "鄂伦春族" },
  { code: "52", name: "独龙族" },
  { code: "53", name: "塔塔尔族" },
  { code: "54", name: "赫哲族" },
  { code: "55", name: "珞巴族" },
]);

const filteredNations = ref(nationList.value);


// 民族过滤方法
function filterNations(query: string) {
  if (query) {
    filteredNations.value = nationList.value.filter(nation =>
      nation.name.toLowerCase().includes(query.toLowerCase())
    );
  } else {
    filteredNations.value = nationList.value;
  }
}

// 民族选择变化
function handleNationChange(value: string) {
  qNation.value = value;
}


// 从URL参数初始化表单
const initFromUrl = () => {
  qName.value = route.query.name || ''
  qStudentId.value = route.query.studentId || ''
  qCollege.value = route.query.college || ''
  qGender.value = route.query.gender || ''
  heightMin.value = route.query.heightMin || ''
  heightMax.value = route.query.heightMax || ''
  bmiMin.value = route.query.bmiMin || ''
  bmiMax.value = route.query.bmiMax || ''
  testYear.value = route.query.testYear || ''

  // 分页参数
  if (route.query.page) currentPage.value = parseInt(route.query.page)
  if (route.query.pageSize) pageSize.value = parseInt(route.query.pageSize)
}

// 更新URL参数
const updateUrlParams = () => {
  const queryParams: Record<string, string | number> = {};

  // 只添加有值的参数
  if (qName.value) queryParams.name = qName.value
  if (qStudentId.value) queryParams.studentId = qStudentId.value
  if (qCollege.value) queryParams.college = qCollege.value
  if (qGender.value) queryParams.gender = qGender.value
  if (heightMin.value) queryParams.heightMin = heightMin.value
  if (heightMax.value) queryParams.heightMax = heightMax.value
  if (bmiMax.value) queryParams.bmiMax = bmiMax.value
  if (bmiMin.value) queryParams.bmiMin = bmiMin.value
  if (testYear.value) queryParams.testYear = testYear.value


  // 添加分页参数
  queryParams.page = currentPage.value
  queryParams.pageSize = pageSize.value

  // 更新URL而不刷新页面
  router.push({
    query: queryParams
  })
}

// 切换高级筛选显示
function toggleAdvancedFilters() {
  showAdvancedFilters.value = !showAdvancedFilters.value;
}

// 重置筛选条件
function resetFilters() {
  // 重置基础筛选
  qCollege.value = ""
  qGender.value = ""
  qName.value = ""
  qStudentId.value = ""
  qNation.value = ""

  // 重置高级筛选
  heightMin.value = ""
  heightMax.value = ""
  weightMin.value = ""
  weightMax.value = ""
  bmiMin.value = ""
  bmiMax.value = ""
  testYear.value = ""
  testGrade.value = ""
  totalScoreMin.value = ""
  totalScoreMax.value = ""
  fiftyMeterMin.value = ""
  fiftyMeterMax.value = ""
  enduranceRunScoreMin.value = ""
  enduranceRunScoreMax.value = ""

  // 重新查询
  conditionPageQuery(1, pageSize.value)
}

//切换图表显示
function toggleAdvancedCharts() {
  advanceCharts.value = !advanceCharts.value;
}

const selectedColumns = ref(['studentId', 'name', 'gender', 'college', 'height', 'weight', 'bmi', 'totalScore', 'testGrade']);

// 表格列选择相关
const columnOptions = ref([
  { label: '学号', value: 'studentId', disabled: true },
  { label: '姓名', value: 'name', disabled: true },
  { label: '性别', value: 'gender' },
  { label: '出生日期', value: 'birthDate' },
  { label: '学院', value: 'college' },
  { label: '班级', value: 'className' },
  { label: '身高', value: 'height' },
  { label: '体重', value: 'weight' },
  { label: 'BMI', value: 'bmi' },
  { label: '总分', value: 'totalScore' },
  { label: '等级', value: 'testGrade' },
  { label: '测试年份', value: 'testYear' },
  { label: '政治面貌', value: 'politicalAffiliation' },
  { label: '民族', value: 'nationality' },
  { label: '电话', value: 'contactNumber' },
  { label: '身份证号码', value: 'idCard' },
  { label: '家庭住址', value: 'homeAddress' },
]);

function formatGender(row, column, cellValue) {
  const statusMap = {
    2: '女',
    1: '男',
  };
  return statusMap[cellValue] || '未知';
}

function filterHandler(value, row, column) {
  const property = column.property; // 当前列的属性名
  if (property === 'gender') {
    // 将 gender 的值转换为 '男' 或 '女'
    const genderText = row.gender === '1' ? '男' : row.gender === '2' ? '女' : '未知';
    return genderText === value; // 返回是否匹配筛选条件
  }

  return true; // 默认返回 true，表示不过滤
}

const handleFilterChange = (filters) => {
  // 获取筛选条件
  const genderFilter = filters.gender;
  if (genderFilter && genderFilter.length == 1) {
    // 将筛选条件存储到 qGender
    qGender.value = genderFilter[0] === '男' ? '1' : '2';
  } else {
    qGender.value = ''; // 清空筛选条件
  }
  // 发起请求
  conditionPageQuery(currentPage.value, pageSize.value);
};

onMounted(() => {
  // resetFilters();//重置筛选项并查询

  initFromUrl();
  window.addEventListener('keydown', handleKeyDown);
  conditionPageQuery(currentPage.value, pageSize.value);
  init();//获取上面两个图像的数据
})

// 可选：组件卸载时移除事件监听
onBeforeUnmount(() => {
  window.removeEventListener('keydown', handleKeyDown);
});

// 分页条件查询全校人员信息
function conditionPageQuery(page, pageSize) {

  isSearchLoding.value = true
  try {

    // 先更新URL参数
    updateUrlParams()

    const params = {
      page: page,                  // 当前页码
      pageSize: pageSize,          // 每页记录数
      qCollege: qCollege.value,          // 学院筛选条件
      qGender: qGender.value,            // 性别筛选条件
      qName: qName.value,                // 姓名筛选条件
      qStudentId: qStudentId.value,      // 学号筛选条件
      qNation: qNation.value,            // 民族筛选条件
      heightMin: heightMin.value,        // 身高最小值筛选
      heightMax: heightMax.value,        // 身高最大值筛选
      weightMin: weightMin.value,        // 体重最小值筛选
      weightMax: weightMax.value,        // 体重最大值筛选
      bmiMin: bmiMin.value,              // BMI最小值筛选
      bmiMax: bmiMax.value,              // BMI最大值筛选
      testYear: testYear.value,          // 测试年份筛选
      testGrade: testGrade.value,        // 测试等级筛选
      totalScoreMin: totalScoreMin.value, // 总分最小值筛选
      totalScoreMax: totalScoreMax.value, // 总分最大值筛选
      fiftyMeterMin: fiftyMeterMin.value, // 50米跑最小成绩筛选
      fiftyMeterMax: fiftyMeterMax.value, // 50米跑最大成绩筛选
      enduranceRunScoreMin: enduranceRunScoreMin.value, // 耐力跑最小成绩筛选
      enduranceRunScoreMax: enduranceRunScoreMax.value, // 耐力跑最大成绩筛选
    };

    console.log("携带的参数", params)


    getPageAllSchool(params).then(result => {
      tableData.value = result.data.records
      total.value = result.data.total
    })
    // const result = await getPageAllSchool(params);
    // tableData.value = result.data.records;
    // total.value = result.data.total;

  } catch (err) {
    console.log('获取表格数据失败', err)
  } finally {
    isSearchLoding.value = false
  }
}

// 每页显示条目个数变化
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  conditionPageQuery(currentPage.value, val)
}

// 当前页码变化
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  conditionPageQuery(val, pageSize.value)
}

// 选中的成员信息
const selectedIds = ref([])
// 多选框 选择项发生变化时触发
function handleSelectionChange(selection) {
  // 提取所有选中行的 Id
  selectedIds.value = selection.map(item => item.id)
  console.log("选中的 ID:", selectedIds)
}

// 类型定义
interface ChartData {
  malePie: {
    qualified: number;
    unqualified: number;
  };
  femalePie: {
    qualified: number;
    unqualified: number;
  };
  maleBar: number[];
  femaleBar: number[];
  lineChart: {
    maleData: number[];
    femaleData: number[];
  };
}

const chartData = ref<ChartData>();

// 获取数据
const init = async () => {
  try {
    const response = await getLeftBottomMainChartData(); // 替换为实际API地址
    chartData.value = response.data;
    // 初始化图表
    initBarChart1();
    initBarChart2();
  } catch (error) {
    console.error('数据获取失败:', error);
  }
};

//柱状图
const barChart1 = ref<HTMLElement | null>(null);
// 初始化
let barChart1Instance: echarts.ECharts | null = null;
const initBarChart1 = () => {
  if (barChart1.value) {
    barChart1Instance = echarts.init(barChart1.value);
    updatebarChart1();
  }
};
const updatebarChart1 = async () => {
  try {
    type EChartsOption = echarts.EChartsOption;
    var option: EChartsOption;

    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      title: {
        text: 'BMI/男', // 主标题
        //subtext: '按不同范围划分的BMI值', // 副标题
        left: 'center', // 标题居中
        textStyle: {
          color: 'black', // 标题文字颜色
          fontSize: '1.1rem', // 标题字体大小
        },
      },
      grid: {
        left: '5%',
        right: '6%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ["17.5以下", "17.5-17.9", "17.9-23.9", "23.9-30", "30以上"],
          axisLabel: {
            rotate: 0,//倾斜度
            color: 'black',// 调整轴标签字体颜色
            fontSize: '0.7rem', // 设置字体大小
            interval: 0, // 强制显示所有标签
          },
          axisTick: {
            alignWithLabel: true
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            rotate: 0,//倾斜度
            fontSize: '0.7rem', // 设置字体大小
            color: 'black' // 调整轴标签字体颜色
          },
          name: '人数/人', // 纵坐标标题
          nameTextStyle: {
            color: 'black', // 纵坐标标题颜色
            fontSize: '1rem', // 纵坐标标题字体大小
            padding: [0, 40, -15, 0] // 向右偏移，值越大，标题越向右移动（顶部右侧、底部左侧、左右对称）
          },
          nameGap: 29, // 向下移动标题，调整此值来控制标题的位置
          nameLocation: 'end', // 横坐标标题的位置，'start', 'center', 'end'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: chartData.value.maleBar,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#00BFFF' // 渐变起始颜色
              },
              {
                offset: 1, color: '#B0E0E6' // 渐变结束颜色
              }]
            },
          },
          markArea: {
            data: [
              // 偏轻区域 (17.5以下) - 红色
              [
                {
                  name: '偏轻',
                  xAxis: '17.5以下',
                  itemStyle: { color: 'rgba(255, 0, 0, 0.1)' }, // 浅红色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '偏轻',
                    fontSize: '1rem', // 设置字体大小
                    color: 'red', // 设置字体颜色
                    offset: [-12, 0] // 微调文字位置
                  }
                },
                { xAxis: '17.5以下' }
              ],
              // 合格区域 (17.5-17.9) - 黄色
              [
                {
                  name: '合格',
                  xAxis: '17.5-17.9',
                  itemStyle: { color: 'rgba(255, 255, 0, 0.2)' }, // 浅黄色背景
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '合格',
                    fontSize: '1rem', // 设置字体大小
                    color: '#FFA07A', // 设置字体颜色
                    offset: [0, 0] // 微调文字位置
                  }
                },
                { xAxis: '17.5-17.9' }
              ],
              // 优秀区域 (17.9-23.9) - 绿色
              [
                {
                  name: '优秀',
                  xAxis: '17.9-23.9',
                  itemStyle: { color: 'rgba(0, 255, 0, 1)' }, // 浅绿色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '优秀',
                    fontSize: '1rem', // 设置字体大小
                    color: '#00FF00', // 设置字体颜色
                    offset: [0, 0] // 微调文字位置
                  }
                },
                { xAxis: '17.9-23.9' }
              ],
              // 合格区域 (23.9-30) - 黄色
              [
                {
                  name: '合格',
                  xAxis: '23.9-30',
                  itemStyle: { color: 'rgba(255, 255, 0, 0.2)' }, // 浅黄色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '合格',
                    fontSize: '1rem', // 设置字体大小
                    color: '#FFA07A', // 设置字体颜色
                    offset: [0, 0] // 微调文字位置
                  }
                },
                { xAxis: '23.9-30' }
              ],
              // 偏重区域 (30以上) - 红色
              [
                {
                  name: '偏重',
                  xAxis: '30以上',
                  itemStyle: { color: 'rgba(255, 0, 0, 0.1)' }, // 浅红色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '偏重',
                    fontSize: '1rem', // 设置字体大小
                    color: 'red', // 设置字体颜色
                    offset: [12, 0] // 微调文字位置
                  }
                },
                { xAxis: '30以上' }
              ]
            ]
          },
          markLine: {
            data: [
              // 偏轻的线
              {
                name: '偏轻',
                xAxis: '17.5以下',
                lineStyle: { type: 'dashed', color: 'red' },
                label: { position: 'end', formatter: '' }
              },
              // 优秀的线
              {
                name: '',
                xAxis: '17.9-23.9',
                lineStyle: { type: 'dashed', color: '#00FF00' },
                label: { position: 'end', formatter: '' }
              },
              // 偏重的线
              {
                name: '偏重',
                xAxis: '30以上',
                lineStyle: { type: 'dashed', color: 'red' },
                label: { position: 'end', formatter: '' }
              }
              // 'dashed' — 虚线。'solid' — 实线。'dotted' — 点线。
            ]
          }
        }
      ]
    };

    option && barChart1Instance.setOption(option);

  } catch (error) {
    console.log('获取左下中心图失败！')
  }
}

const barChart2 = ref<HTMLElement | null>(null);
// 初始化
let barChart2Instance: echarts.ECharts | null = null;
const initBarChart2 = () => {
  if (barChart2.value) {
    barChart2Instance = echarts.init(barChart2.value);
    updateBarChart2();
  }
};

const updateBarChart2 = async () => {
  try {
    type EChartsOption = echarts.EChartsOption;
    var option: EChartsOption;

    option = {
      title: {
        text: 'BMI/女', // 主标题
        //subtext: '按不同范围划分的BMI值', // 副标题
        left: 'center', // 标题居中
        textStyle: {
          color: 'black', // 标题文字颜色
          fontSize: '1.1rem', // 标题字体大小
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '7%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ["17以下", "17-17.2", "17.2-23.9", "23.9-24", "24以上"],
          axisLabel: {
            rotate: 0,//倾斜度
            color: '#black',// 调整轴标签字体颜色
            fontSize: '0.7rem', // 设置字体大小
            interval: 0, // 强制显示所有标签
          },
          axisTick: {
            alignWithLabel: true
          },
          name: 'BMI', // 横坐标标题
          nameLocation: 'start', // 关键：标题从轴线起点开始
          nameTextStyle: {
            color: 'black', // 横坐标标题颜色
            fontSize: '0.9rem', // 设置字体大小
          },
          nameGap: 25, // 向右移动标题，调整此值来控制标题的位置
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            rotate: 0,//倾斜度
            fontSize: '0.7rem', // 设置字体大小
            color: '#black' // 调整轴标签字体颜色
          },
          name: '人数/人', // 纵坐标标题
          nameTextStyle: {
            color: 'black', // 纵坐标标题颜色
            fontSize: '1rem', // 纵坐标标题字体大小
            padding: [0, 40, -15, 0] // 向右偏移，值越大，标题越向右移动（顶部右侧、底部左侧、左右对称）
          },
          nameGap: 29, // 向下移动标题，调整此值来控制标题的位置
          nameLocation: 'end', // 横坐标标题的位置，'start', 'center', 'end'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: chartData.value.femaleBar,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#FFC0CB' // 渐变起始颜色
            },
            {
              offset: 1, color: '#FFF0F5' // 渐变结束颜色
            }]
          },
          markArea: {
            data: [
              // 偏轻区域
              [
                {
                  name: '偏轻',
                  xAxis: '17以下',
                  itemStyle: { color: 'rgba(255, 0, 0, 0.1)' }, // 浅红色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '偏轻',
                    fontSize: '1rem', // 设置字体大小
                    color: 'red', // 设置字体颜色
                    offset: [-12, 0] // 微调文字位置
                  }
                },
                { xAxis: '17以下' }
              ],
              // 合格区域 
              [
                {
                  name: '合格',
                  xAxis: '17-17.2',
                  itemStyle: { color: 'rgba(255, 255, 0, 0.2)' }, // 浅黄色背景
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '合格',
                    fontSize: '1rem', // 设置字体大小
                    color: '#FFA07A', // 设置字体颜色
                    offset: [0, 0] // 微调文字位置
                  }
                },
                { xAxis: '17-17.2' }
              ],
              // 优秀区域
              [
                {
                  name: '优秀',
                  xAxis: '17.2-23.9',
                  itemStyle: { color: 'rgba(0, 255, 0, 1)' }, // 浅绿色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '优秀',
                    fontSize: '1rem', // 设置字体大小
                    color: '#00FF00', // 设置字体颜色
                    offset: [0, 0] // 微调文字位置
                  }
                },
                { xAxis: '17.2-23.9' }
              ],
              // 合格区域 
              [
                {
                  name: '合格',
                  xAxis: '23.9-24',
                  itemStyle: { color: 'rgba(255, 255, 0, 0.2)' }, // 浅黄色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '合格',
                    fontSize: '1rem', // 设置字体大小
                    color: '#FFA07A', // 设置字体颜色
                    offset: [0, 0] // 微调文字位置
                  }
                },
                { xAxis: '23.9-24' }
              ],
              // 偏重区域 
              [
                {
                  name: '偏重',
                  xAxis: '24以上',
                  itemStyle: { color: 'rgba(255, 0, 0, 0.1)' }, // 浅红色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '偏重',
                    fontSize: '1rem', // 设置字体大小
                    color: 'red', // 设置字体颜色
                    offset: [12, 0] // 微调文字位置
                  }
                },
                { xAxis: '24以上' }
              ]
            ]
          },
          markLine: {
            data: [
              // 偏轻的线
              {
                name: '偏轻',
                xAxis: '17以下',
                lineStyle: { type: 'dashed', color: 'red' },
                label: { position: 'end', formatter: '' }
              },
              // 优秀的线
              {
                name: '',
                xAxis: '17.2-23.9',
                lineStyle: { type: 'dashed', color: '#00FF00' },
                label: { position: 'end', formatter: '' }
              },
              // 偏重的线
              {
                name: '偏重',
                xAxis: '24以上',
                lineStyle: { type: 'dashed', color: 'red' },
                label: { position: 'end', formatter: '' }
              }
              // 'dashed' — 虚线。'solid' — 实线。'dotted' — 点线。
            ]
          }
        }
      ]
    };
    option && barChart2Instance.setOption(option);
  } catch (error) {
    console.log('获取左下中心图失败！')
  }
}

</script>

<style>
.el-table .cell {
  justify-self: center;
  text-align: center;
}
</style>

<style scoped>
/* 操作按钮 */
.detail-btn {
  text-decoration: none;
  color: inherit;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: none;
  background-color: #409eff;
  color: white;
  padding: 6px 16px;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  border-radius: 5px;
}

.tableShow {
  width: 100%;
  flex-grow: 1;
  margin-top: 10px;
  font-size: 20px;
}

/* 筛选容器 */
.filter-container {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin: 5px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 基础筛选 */
.basic-filters {
  margin-bottom: 15px;
}

/* 筛选网格布局 - 关键优化 */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 15px;
  align-items: center;
}

.filter-grid-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
  align-items: center;
}

/* 在小屏幕上确保至少显示两列 */
@media (max-width: 768px) {
  .filter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* 在极小屏幕上（如手机竖屏）显示一列 */
@media (max-width: 480px) {
  .filter-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.filter-item label {
  font-weight: 500;
  color: #606266;
  white-space: nowrap;
  min-width: 40px;
  font-size: 14px;
}

/* 范围筛选项 */
.range-filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.range-filter-item label {
  font-weight: 500;
  color: #606266;
  white-space: nowrap;
  min-width: 90px;
  font-size: 14px;
}

.range-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.range-input {
  width: 70px;
  padding: 6px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
}

.range-separator {
  color: #909399;
  font-weight: bold;
  font-size: 14px;
}

/* 高级筛选 */
.advanced-filters {
  border-top: 1px solid #e4e7ed;

}

.filter-section {
  margin-bottom: 20px;
}

.section-title {
  color: #409eff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #409eff;
}

/* 筛选操作按钮 */
.filter-actions {
  border-top: 1px solid #e4e7ed;
  padding-top: 20px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.toggle-btn {
  color: aquamarine;
  margin-left: 20px;
}

/* 容器布局 */
.charts-container {
  display: flex;
  align-items: center;
  gap: 30px;
  background: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.advanced-btn-container {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.secondary-btn {
  margin-right: 10px;
  padding: 8px 16px;
  font-size: 14px;
  background-color: #e4e7ed;
  color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 数据卡片样式 */
.audit-count-card {
  min-width: 240px;
  padding: 25px;
  background: linear-gradient(135deg, #ffffff 0%, #f1f3f5 100%);
  border-radius: 12px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
}

.audit-count-card:hover {
  transform: translateY(-2px);
}

/* 头部样式 */
.count-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dee2e6;
}

.notification-icon {
  font-size: 1.4em;
  color: #ff6b6b;
}

.count-title {
  font-size: 1.1em;
  color: #495057;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* 数字展示 */
.count-content {
  text-align: center;
  margin: 20px 0;
}

.highlight-number {
  font-size: 2.8em;
  font-weight: 700;
  color: #f03e3e;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  margin-right: 5px;
}

.unit {
  font-size: 1.2em;
  color: #868e96;
  vertical-align: super;
}

/* 底部文字 */
.count-footer {
  text-align: center;
  color: #adb5bd;
  font-size: 0.9em;
  letter-spacing: 0.5px;
}

/* 设置父容器为flex布局 */
.charts-container {
  display: flex;
  justify-content: space-around;
  /* 子元素之间留有空间 */
  align-items: flex-start;
  /* 对齐方式为顶部对齐 */
}

/* 分页栏 */
.pageNav {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

/* 列选择器 */
.columnSelector {
  display: flex;
  width: 1000px;
  align-items: center;
  margin: 10px auto;
}

/* 选择器标题 */
.selectorTitle {
  min-width: 130px;
}

/* 输入框 */
.input-field {
  padding: 6px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  /* flex: 1; */
  min-width: 160px;
  background-color: #fff;
  color: #333;
}

.input-field:focus {
  border-color: #409eff;
  outline: none;
}

/* 标签 */
.left-align {
  width: 100px;
  text-align: center;
  color: #606266;
}

/* 响应式优化 - 确保在小屏幕上的可用性 */
@media (max-width: 1024px) {
  .filter-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .filter-container {
    padding: 15px;
  }

  .filter-item label,
  .range-filter-item label {
    min-width: 60px;
    font-size: 13px;
  }

  .range-input {
    width: 60px;
    padding: 5px 6px;
    font-size: 12px;
  }

  .input-field {
    padding: 5px 6px;
    font-size: 12px;
    min-width: 100px;
  }

  .action-buttons {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .toggle-btn {
    margin-left: 0;
  }
}

@media (max-width: 480px) {

  .filter-item,
  .range-filter-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .filter-item label,
  .range-filter-item label {
    min-width: auto;
    width: 100%;
  }

  .range-inputs {
    width: 100%;
    justify-content: space-between;
  }

  .range-input {
    flex: 1;
    max-width: 80px;
  }

  .input-field {
    width: 100%;
    min-width: auto;
  }
}

::v-deep .toggle-btn.el-button--success {
  /* 基础状态样式 */
  background-color: #ff4456;
  /* 自定义主色 */
  border-color: #e0384e;
  /* 自定义边框色 */
  color: #ffffff;
  /* 文字颜色 */

  /* Hover 状态 */
  &:hover {
    background-color: #ff6b7d;
    border-color: #ff4456;
  }

  /* Active 状态 */
  &:active {
    background-color: #cc2a3f;
    border-color: #b31e33;
  }
}
</style>
